<template>
    <div>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="22%"
                center
                :before-close="handleClose">
            <div>
                <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
                    <el-tab-pane label="普通登录" name="first">
                        <div class="inputBox1"><div class="userImg"><img src="../assets/user2.png" alt=""></div>
                            <input type="text" placeholder="请输入账号" v-model="user">
                        </div>
                        <div class="inputBox2"><div class="userImg"><img src="../assets/lock.png" alt=""></div>
                            <input type="password" placeholder="请输入密码" v-model="passWord">
                        </div>
                        <div><el-button type="primary" @click="login">登录</el-button></div>
                    </el-tab-pane>
                    <el-tab-pane label="手机登录" name="second">
                        <div class="inputBox1"><div class="userImg"><img src="../assets/user2.png" alt=""></div>
                            <input type="text" placeholder="请输入手机号" v-model="mobile">
                        </div>
                        <div>
                            <div class="inputBox2 inputSmall"><div class="userImg"><img src="../assets/lock.png" alt=""></div>
                                <input type="text" placeholder="请输入验证码" class="code" v-model="code">
                            </div>
                            <el-button type="success" class="getBtn" @click="codeCalidation">获取验证码</el-button>
                        </div>
                        <div><el-button type="primary" @click="codeLogin">登录</el-button></div>
                    </el-tab-pane>

                </el-tabs>
            </div>

            <div @click="tologonVisible" class="toLogon">立即注册！</div>
            <div @click="toforgetPassword" class="toForget">忘记密码？</div>
        </el-dialog>
        <el-dialog
                title="提示"
                :visible.sync="logonVisible"
                width="22%"
                :before-close="handleClose">
            <span>这是一段信息</span>
            <div @click="todialogVisible">去登录</div>
        </el-dialog>
        <el-dialog
                title="提示"
                :visible.sync="forgetPassword"
                width="25%"
                :before-close="handleClose">
            <div class="forGetBox">
                <div class="inputBox1">
                    <input type="text" placeholder="请输入账号" v-model="forgetUser">
                </div>
                <div class="inputBox2 password">
                    <input type="password" placeholder="请输入新密码" v-model="newPassword">
                </div>
                <div class="inputBox2 password">
                    <input type="password" placeholder="请再次输入密码" v-model="agginPssword">
                </div>
                <div class="inputBox1">
                    <input type="text" placeholder="请输入手机号" v-model="forgetMobile">
                </div>
                <div class="getBox">
                    <div class="inputBox2 inputSmall">
                        <input type="text" placeholder="请输入验证码" class="code" v-model="forgetCode">
                    </div>
                    <el-button type="success" class="getBtn" @click="getForgetCode">获取验证码</el-button>
                </div>
                <div class="confirmBox"><button class="confirm" @click="updateLogin">确定更改新密码</button></div>
                <div @click="goToLogonVisible" class="toLogon">立即注册！</div>
                <div @click="todialogVisible" class="toForget" >去登录</div>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    import {codeLogin, forgetCode, getCode, getLogin, updateCode} from "../api/bounced";

    export default {
        name: "bounced",
        props:{
            isLogon:Boolean
        },
        data(){
            return{
                handleClose:"",
                activeName: 'second',
                dialogVisible:false,//控制登录弹框显示消失
                logonVisible:false,//控制注册弹框显示消失
                forgetPassword:false,//控制忘记密码显示消失
                user:"",//账号
                passWord:"",//密码
                mobile:"",//手机号
                code:"",//验证码
                forgetUser:"",//忘记密码页面账号
                newPassword:"",//忘记密码页面新密码
                agginPssword:"",//忘记密码页面确认密码
                forgetMobile:"",//忘记密码页面手机号
                forgetCode:"",//忘记密码页面验证码
            }
        },
        handleClose(done) {
          done()
        },
        watch:{
            isLogon(){
                this.dialogVisible=true
            }
        },
        methods:{
            handleClick(tab, event) {
                console.log(tab, event);
            },
            tologonVisible(){
                this.logonVisible=true
                this.dialogVisible=false
            },
            todialogVisible(){
                this.logonVisible=false
                this.dialogVisible=true
                this.forgetPassword=false
            },
            toforgetPassword(){
                this.dialogVisible=false
                this.forgetPassword=true

            },
            goToLogonVisible(){
                this.logonVisible=true
                this.forgetPassword=false
            },

            login(){
                console.log(this.user)
                console.log(this.passWord)
                //    登录
                getLogin(this.user,this.passWord).then(res=>{
                    console.log(res)
                    if (res.msg == "用户不存在/密码错误") {
                        alert("用户不存在/密码错误")
                    } else {
                        // alert("登录成功")
                        window.location.href="/personal"
                        this.$store.commit("judgeLogin",{isLogin:true,userInfo:res.userInfo})
                    }
                })
            },
            //     获取验证码
            codeCalidation(){
                 getCode(this.mobile).then(res=>{
                     if (res.msg == "操作成功") {
                         alert("验证码发送成功")
                     } else {
                         alert("请输入手机号/该手机号未注册")
                     }
                })
            },
            codeLogin(){
                //验证码登录
                codeLogin(this.mobile,this.code).then(res=>{
                    console.log(res)
                    if (res.msg == "操作成功") {
                        window.location.href="/personal"
                        this.$store.commit("judgeLogin",{isLogin:true,userInfo:res.userInfo})
                    } else {
                        alert("验证码错误")
                    }
                })
            },
            //修改密码时发送手机验证码
            getForgetCode(){
                forgetCode(this.forgetUser,this.forgetMobile).then(res=>{
                    if (res.msg == "操作成功") {
                        alert("验证码发送成功")
                    } else {
                        alert("手机号错误")
                    }
                })
            },
            //修改密码成功
            updateLogin(){
                if(this.newPassword==this.agginPssword){
                updateCode(this.forgetUser,this.newPassword,this.forgetMobile,this.forgetCode).then(res=>{
                    if (res.msg == "操作成功") {
                        alert("登录成功")
                    } else if(res.msg == "密码长度必须大于6位"){
                            alert("密码长度必须大于6位")
                    }else{
                        alert("验证码错误")
                    }
                })
                }else{
                    alert("两次输入密码不一致")
                }
            }
        },
        created(){
            // console.log(this.$route.query)
            if(this.$route.query.bounce=="true"){
                this.dialogVisible=true
            }
        }

    }
</script>

<style scoped>
.userImg{
    float: left;
    margin-top: 5px;
    width: 20px;
    height: 20px;
}
.userImg>img{
    width: 100%;
    height: 100%;
}
.inputBox1,.inputBox2{
    margin: 10px auto;
    width: 282px;
    height: 31px;
    border: 1px solid gainsboro;
}

.inputBox1>input,.inputBox2>input{
    line-height: 30px;
    border: 0;
    outline: white;
}
.toLogon{
    float: left;
}
.toForget{
    float: right;
}
.el-button--primary{
    margin: 20px auto;
    width: 288px;
    height: 32px;
    background-color: #00cf8c;
}
.el-button--primary:hover{
    background-color: #00cf8c;
}
.inputSmall{
    float: left;
    width: 150px;
    line-height: 30px;
}
.getBtn{
    margin-top: 5px;
    float: right;
    background-color: #00cf8c;
}
.getBtn:hover{
    background-color: #00cf8c;
}
.code{
    width: 100px;
}
/deep/.el-dialog__title{
    display: none;
}
/deep/ .el-tabs__nav {
    width: 100%;
    display: flex;
    justify-content: center;
}
/deep/.el-tabs__item.is-active{
    color: #00cf8c;
}
/deep/#tab-first:hover{
    color: #00cf8c;
}
/deep/#tab-second:hover{
    color: #00cf8c;
}
/deep/.el-tabs__active-bar{
    background-color: #00cf8c;
}
.getBox{
    margin-left: 10px;
    overflow: hidden;
    width: 280px;
}
.forGetBox{
    margin: auto;
    width: 308px;
}
.forGetBox input{
    margin-left: 10px;
}
.password{
    margin: 15px auto;
}
.confirm{
    width: 116px;
    height: 32px;
    background-color: #00cf8c;
    border: 0;
    color: white;
}
.confirmBox{
    margin: 10px 10px;
}
</style>